<template>
    <div v-loading="loading" element-loading-text="拼命加载中">

        <div class="content_top">
            设置代金券发放规则
        </div>
        <div class="content">
            <el-form ref="form" :model="form" :rules="rules" label-width="110px" size="mini">
                <el-form-item label="有效期：" prop="dataRange">
                    <el-date-picker
                            v-model="form.dataRange"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="券面值：" prop="amount">
                    <el-input-number v-model="form.amount" :min="0" :precision="2" style="width: 400px;"></el-input-number>
                </el-form-item>
                <el-form-item label="满多少可用：" prop="orderPriceLimit">
                    <el-input-number v-model="form.orderPriceLimit" :min="0" :precision="2" style="width: 400px;"></el-input-number>
                </el-form-item>
                <el-form-item label="有效期(天)：" prop="validity">
                    <el-input-number v-model="form.validity" :min="0" style="width: 400px;"></el-input-number>
                </el-form-item>
                <el-form-item label="发放数量：" prop="count">
                    <el-input-number v-model="form.count" :min="0" style="width: 400px;"></el-input-number>
                    <span> 注册时每人发放的数量</span>
                </el-form-item>
                <el-form-item label="状态：" prop="status" style="width: 400px;">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="2">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item style="text-align: left">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

    import {saveCoupon, couponInfo} from "@/api/coupon/config";

    export default {
        name: 'Config',
        data() {
            return {
                loading: false,
                form: {
                    dataRange: null,
                    startDate: null,
                    endDate: null,
                    amount: 0,
                    orderPriceLimit: 0,
                    validity: 0,
                    count: 0,
                    status: 2
                },
                rules: {
                    dataRange: [
                        {required: true, message: '请输入有效期', trigger: 'blur'}
                    ],
                    amount: [
                        {required: true, message: '请输入券面值', trigger: 'blur'},
                    ],
                    orderPriceLimit: [
                        {required: true, message: '请输入满多少可用', trigger: 'blur'},
                    ],
                    validity: [
                        {required: true, message: '请输入有效天数', trigger: 'blur'},
                    ],
                    count: [
                        {required: true, message: '请输入发放数量', trigger: 'blur'},
                    ],
                    status: [
                        {required: true, message: '请选择状态', trigger: 'blur'},
                    ]
                }
            }
        },
        mounted() {
            this.loadConfig()
        },
        methods: {
            async loadConfig() {
                this.loading = true
                let res = await couponInfo()
                this.loading = false
                this.form = res.data;
                this.form.dataRange = [this.form.startDate, this.form.endDate]
            },
            back() {
                this.$router.back()
            },
            onSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.save()
                    } else {
                        return false;
                    }
                });
            },
            async save() {
                this.loading = true;
                let params = JSON.parse(JSON.stringify(this.form))
                let res = await saveCoupon(params)
                this.loading = false
                if (res.code !== '0') {
                    return this.$notify.error({title: '消息', message: res.message})
                }
                this.$notify({title: '消息', message: '保存成功', type: 'success'});
            }
        }
    }
</script>

<style scoped>

</style>